<template>
  <view class="custom-tab-bar" :class="{ 'tab-bar-hidden': isHidden }">
    <view class="tab-bar-border"></view>
    <view
      v-for="(item, index) in list"
      :key="index"
      class="tab-bar-item"
      :class="{ 'center-item': index === 2 }"
      @click="switchTab(item, index)"
    >
      <view class="icon-wrapper" :class="{ 'add-button': index === 2 }">
        <text v-if="index === 2" class="add-icon">+</text>
        <text v-else class="iconfont" :class="getIconClass(index)"></text>
      </view>
			<uni-icons :type="item.icon" size="24" :color="current === index ? '#007AFF' : '#666'" />
      <text class="tab-text" :class="{ active: current === index && index !== 2 }">{{ item.text }}</text>
    </view>
  </view>
</template>

<script lang="ts">
import { ref, computed } from 'vue'

export default {
  name: 'CustomTabBar',
  setup() {
    const current = ref(0)
    const isHidden = ref(false)

    const list = [
      { pagePath: '/pages/index/index', text: '首页', icon: 'home'  },
      { pagePath: '/pages/medicine/list', text: '药品', icon: 'list' },
      { pagePath: '/pages/medicine/create', text: '添加', icon: 'plus' },
      { pagePath: '/pages/calendar/index', text: '日历', icon: 'calendar' },
      { pagePath: '/pages/profile/index', text: '我的', icon: 'person'  }
    ]

    const getIconClass = (index: number) => {
      const iconMap = {
        0: 'icon-home',
        1: 'icon-medicine',
        3: 'icon-calendar',
        4: 'icon-profile'
      }
      return iconMap[index] || ''
    }

    const switchTab = (item: any, index: number) => {
      if (current.value === index) return
      current.value = index
      uni.switchTab({
        url: item.pagePath
      })
    }

    // 监听路由变化，控制TabBar显示隐藏
    uni.onAppRoute((route: any) => {
      const { path } = route
      const isTabPage = list.some(item => item.pagePath.includes(path))
      isHidden.value = !isTabPage
    })

    return {
      current,
      isHidden,
      list,
      getIconClass,
      switchTab
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #ffffff;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;

  &.tab-bar-hidden {
    transform: translateY(100%);
  }
}

.tab-bar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1rpx;
  background: rgba(0, 0, 0, 0.1);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;

  &.center-item {
    margin-top: -40rpx;
  }
}

.icon-wrapper {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  &.add-button {
    width: 100rpx;
    height: 100rpx;
    background: #018d71;
    border-radius: 50%;
    box-shadow: 0 4rpx 8rpx rgba(1, 141, 113, 0.3);
  }
}

.add-icon {
  color: #ffffff;
  font-size: 48rpx;
  font-weight: bold;
}

.tab-text {
  font-size: 24rpx;
  color: #999999;
  margin-top: 8rpx;

  &.active {
    color: #018d71;
  }
}

.iconfont {
  font-size: 48rpx;
  color: #999999;

  &.active {
    color: #018d71;
  }
}
</style>